action<template>
  <view class="content">
    <view style="background-color: white;padding: 0 32rpx;border-radius:8rpx;">
      <view
        style="display: flex; align-items:center;justify-content:space-between; border-bottom:1rpx solid #ccc; padding:32rpx 0;"  @tap="openAuth">
        <view>
          <text>更换头像</text>
        </view>
        <view style="display: flex; align-items:center;">
          <u-upload style="border-radius: 50%;" width="100" height="100" :custom-btn="true"
            @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :show-upload-list="true"
            :action="action" :auto-upload="true" :file-list="fileList" :show-progress="true" :deletable="false"
            :header="uploadToken" :max-count="1" @on-list-change="onListChange" :on-remove="uploadRemove"
            @on-success="uploadSuccess" :max-size="FileSize" :size-type="['compressed']" >
            <!-- :on-remove="uploadRemove" -->
            <view slot="addBtn">
              <image v-show="imageshow" :src="this.avatar" mode=""

                style="width: 100rpx;height: 100rpx;border-radius: 8rpx;margin-right:8rpx;"></image>
            </view>
          </u-upload>
          <u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
        </view> 
      </view>
      <view @tap="gonamechange"
        style="display: flex; align-items:center;justify-content:space-between;padding:32rpx 0; ">
        <view>
          <text>用户名</text>
        </view>
        <view style="display: flex; align-items:center;">
          <text style="margin-right:50rpx;">{{ name }}</text>
          <u-icon name="arrow-right" color="#ccc" size="28"></u-icon>
        </view>
      </view>
    </view>
    <!-- <view @tap="quitlogin"
      style="background-color: white;position:fixed;bottom:0;padding:32rpx 290rpx; text-align:center;color:red;">
      退出登录</view> -->
    <ykAuthpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="WRITE_EXTERNAL_STORAGE"></ykAuthpup>
  </view>
</template>

<script>
import { logOff, updateUser, selectUser } from '@/api/main'
import { BASE_URL_IMG } from '@/api/request'
import ykAuthpup from "@/components/yk-authpup/yk-authpup";
import { FileSize } from '@/common/fileSize';
export default {
  components: {
    ykAuthpup
  },
  data() {
    return {
      FileSize,
      avatar: "../static/image/pagesMine/user.png",
      name: "",
      action: '',
      fileList: [],
      uploadToken: {
        Authorization: ''
      },
      lists: [],
      nowFileList: [],
      imageshow: true
    };
  },
  onShow() {
    this.getuser()
  },
  onLoad() {
    this.action = BASE_URL_IMG
    console.log('BASE_URL', this.action);
    this.uploadToken.Authorization = uni.getStorageSync('token')
    
  },
  methods: {
    openAuth(){
      this.$refs['authpup'].open();
		},
    //用户授权权限后的回调
    changeAuth(){
        //这里是权限通过后执行自己的代码逻辑
        console.log('权限已授权，可执行自己的代码逻辑了');
        this.beforeRemove()
        this.onListChange()
        this.uploadRemove()
        this.uploadSuccess()
        this.onChooseFail()
    },
    // quitlogin() {
    //   let token = uni.getStorageSync('token')
    //   console.log('看看本地', token)
    //   let obj = {
    //     token: token
    //   }
    //   logOff(obj).then(res => {
    //     console.log('退出登录', res)
    //     if (res.code == 200) {
    //       uni.removeStorageSync('token')
    //       uni.redirectTo({ url: '/pages/login/login' })
    //     }
    //   })
    // },
    //获取用户信息
    getuser() {
      selectUser().then(res => {
        console.log('获取到用户信息', res.data.userName)
        this.name = res.data.userName
        this.avatar = res.data.icon
      })
    },
  
    gonamechange() {
      uni.navigateTo({
        url: '/pagesMine/nameChange?name=' + this.name
      })
    },
    beforeRemove(index, lists) {
      console.log("aaa", this.lists[index]);
      this.imageshow = true
      return true;
    },
    onListChange(lists) {
      console.log('onListChange', lists);
      this.lists = lists;

    },
    uploadRemove(e) {
      console.log("返回的图片", e);
    },
    uploadSuccess(e) {
      console.log('看看上传', e)
      this.nowFileList.push(e.data)
      this.imageshow = false
      console.log('看看传参', this.nowFileList)
      let obj = {
        icon: this.nowFileList[0]
      }
      updateUser(obj).then(res => {
        console.log('看看传递的', res)
      })
    },
    onChooseFail(e) {
      console.log(e, 'Wong');
    },
  }
};
</script>

<style scoped lang="scss">
.content {
  min-height: 100vh;
  background-color: #F5F5F5;
  overflow: hidden;
  padding: 32rpx;
}
</style>